<template>
	<div class="poster">
		<list-title :data="header"></list-title>
		<list-table :list="orderList" :tableLoading="tableLoading" :footer="true" :sort="true" :pagination="pagination">
			<template v-slot:data>
				<el-table-column prop="order_sn" label="订单号"></el-table-column>
				<el-table-column prop="member" label="会员名称"></el-table-column>
				<el-table-column prop="order_status" label="订单状态">
					<template slot-scope="scope">
						<span>{{ scope.row.order_status }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="pay_status" label="支付状态"></el-table-column>
				<el-table-column prop="order_amount" label="备案金额"></el-table-column>
				<el-table-column prop="source" label="来源"></el-table-column>
				<el-table-column prop="confirm_time" label="确认时间"></el-table-column>
				<el-table-column prop="add_time" label="添加时间"></el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-popover
						placement="top"
						width="160"
						v-model="delTip[scope.$index+1]"
						v-if="orderList[scope.$index].order_status != '已确认'">
							<p class="del-tip"><span class="el-icon-question"></span>确定删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="delTip.splice(scope.$index+1, 1, false)">取消</el-button>
								<el-button type="primary" size="mini" @click="handleConfirm(scope.$index, scope.row)">确定</el-button>
							</div>
							<el-button type="text" slot="reference" :disabled='submitLock[scope.$index+1]'>
								确认订单 <span class="el-icon-loading" v-if='submitLock[scope.$index+1]'></span>
							</el-button>
						</el-popover>
					</template>
				</el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {changeToBool, getSortData, judgeAuth} from "static/js/common.js"
import {mapGetters} from 'vuex'

export default {
	inject: ['reload'],
	data() {
		return {
			/*头部数据*/
			header: {
				title: '备案列表',
				reload: true,
				buttons: [
					{
						title: '添加备案',
						type: 'primary',
						pathName: 'pc/epi/pj8/Order',
						auth: true,
					}
				]
			},
			auth: {
				editor: true,//编辑
				delete: true,//删除
				sort: true,//排序
			},
			/*列表数据*/
			orderList: [],
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
			tableLoading: true,
			delTip: [],//刪除提示
			submitLock: [],
		};
	},
	components: {
		ListTitle,
		ListTable
	},
	created: function() {
		/*获取列表数据*/
		this.getOrderList()
		/*权限判断显示*/
		// this.header.buttons[0].auth = (judgeAuth('addPoster', this.allMenuList) == undefined)?false:true
		// this.auth.editor = (judgeAuth('modifyExperts', this.allMenuList) == undefined)?false:true
		// this.auth.delete = (judgeAuth('deleteExperts', this.allMenuList) == undefined)?false:true
		// this.auth.sort = (judgeAuth('expertsSort', this.allMenuList) == undefined)?false:true
	},
	watch: {
		/*监听路由变化，根据参数查询数据*/
		'$route' (to){
			this.tableLoading = true
			this.getOrderList()
		}
	},
	methods: {
		/*取出列表数据*/
		getOrderList: function(){
			if(this.$api.orderList != undefined){
				this.$get(this.$api.orderList, this.$route.query).then(res => {
					// console.log(res.data.data.list);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.orderList = []
							Object.keys(res.data.data.list).forEach((k) => {
								let order_status = "未确认"
								switch(res.data.data.list[k].order_status) {
									case '2' :
										order_status = "已确认";
										break;
									case '3' :
										order_status = "已取消";
										break;
								};
								let pay_status = "未支付"
								switch(res.data.data.list[k].pay_status) {
									case '3' :
										order_status = "已付款";
										break;
									case '4' :
										order_status = "已退款";
										break;
								};
								this.orderList.push ({
									id: res.data.data.list[k].order_id,
									member: res.data.data.list[k].member['nickname'],
									order_sn: res.data.data.list[k].order_sn,
									order_status: order_status,
									shipping_status: res.data.data.list[k].shipping_status,
									pay_status: pay_status,
									source: (res.data.data.list[k].source == 1)?"小程序":"后台",
									order_amount: "￥" + res.data.data.list[k].order_amount,
									confirm_time: (res.data.data.list[k].confirm_time != '1000-01-01 00:00:00')?res.data.data.list[k].confirm_time:'',
									add_time: res.data.data.list[k].add_time
								});
							})
							this.pagination = res.data.data.pageInfo
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*确认订单*/
		handleConfirm: function(index, row) {
			console.log(row)
			if(this.$api.confirmOrder != undefined){
				if(!this.submitLock[index+1]){
					this.submitLock[index+1] = true//锁住当前的 删除按钮
					this.delTip.splice(index+1, 1, false)//提示消失
					/*请求后台删除*/
					this.$post(this.$api.confirmOrder, {
						'id': row.id
					}).then(res => {
						if(res.data.code == 0){
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'success'
							});
							this.reload();
						}else{
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'error'
							});
						}
						this.submitLock[index+1] = false//释放当前的 删除按钮
					})
					.catch(err => {})
					.finally(() => {}) 
				}
			}
		},
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
</style>